<template>
  <div class="monitor-center-new" :style="{background: `url(${bgUrl})`}">
    <div class="left-content">
      <content-box :title="'设备信息'" class="device-info-box">
        <device-info :schedule="timestamp"></device-info>
      </content-box>
      <content-box :title="'设备报警系统'" class="device-alarm-system-box">
        <device-alarm-system :schedule="timestamp"></device-alarm-system>
      </content-box>
    </div>
    <div class="center-content">
      <content-box :title="'地图展示'" class="map-show-box">
        <map-show :schedule="timestamp"></map-show>
      </content-box>
      <div class="center-bottom-content">
        <content-box :title="'设备类型统计'" class="device-type-count-box">
          <device-type-count :schedule="timestamp"></device-type-count>
        </content-box>
        <content-box :title="'设备安装省份分布'" class="device-install-box">
          <device-install :schedule="timestamp"></device-install>
        </content-box>
      </div>
    </div>
    <div class="right-content">
      <content-box :title="'警情高发时间统计'" class="warning-instance-time-count-box">
        <warning-instance-time-count :schedule="timestamp"></warning-instance-time-count>
      </content-box>
      <content-box :title="'重大隐患场所排名'" class="place-rank-box">
        <place-rank :schedule="timestamp"></place-rank>
      </content-box>
      <content-box :title="'每月更新榜单排名'" class="daily-update-rank-box">
        <daily-update-rank :schedule="timestamp"></daily-update-rank>
      </content-box>
    </div>
  </div>
</template>

<script>
  import ContentBox from './ContentBox'
  import DeviceInfo from './DeviceInfo'
  import DeviceAlarmSystem from './DeviceAlarmSystem'
  import MapShow from './MapShow'
  import DeviceTypeCount from './DeviceTypeCount'
  import DeviceInstall from './DeviceInstall'
  import WarningInstanceTimeCount from './WarningInstanceTimeCount'
  import PlaceRank from './PlaceRank'
  import DailyUpdateRank from './DailyUpdateRank'
  import Schedule from 'node-schedule'
  export default {
    name: 'MonitorCenterNew',
    components: {
      WarningInstanceTimeCount,
      DeviceAlarmSystem,
      ContentBox,
      DeviceInfo,
      MapShow,
      DeviceTypeCount,
      DeviceInstall,
      WarningInstanceTimeCount,
      PlaceRank,
      DailyUpdateRank
    },
    data () {
      return {
        timestamp: 0,
        bgUrl: '',
        bgPng: '/static/image/monitor-center/new/monitor-bg.png',
        bgWebp: '/static/image/monitor-center/new/monitor-bg.webp',
      }
    },
    created () {
      this.initBackgroundUrl()
    },
    mounted () {
      this.setTimestamp()
      this.createSchedule()
    },
    methods: {
      /**
       * 初始化背景图片
       */
      initBackgroundUrl () {
        this.bgUrl = window.isSupportWebp ? this.bgWebp : this.bgPng
      },
      createSchedule () {
        Schedule.scheduleJob('0 0 * * *', () => {
          this.setTimestamp()
        }) // run everyday at midnight
      },
      setTimestamp () {
        const date = new Date()
        this.timestamp = date.getTime()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .monitor-center-new {
    width: 1664px;
    height: 896px;
    box-sizing: border-box;
    padding: 56px 19px 20px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    .left-content {
      width: 410px;
      /*设备管理*/
      .device-info-box {
        width: 100%;
        height: 216px;
        background: url('/static/image/monitor-center/new/device-info.png') no-repeat;
        margin-bottom: 30px;
      }
      /*设备报警系统*/
      .device-alarm-system-box {
        width: 100%;
        height: 575px;
        background: url('/static/image/monitor-center/new/device-alarm-system.png') no-repeat;
      }
    }
    .center-content {
      width: 764px;
      .map-show-box {
        width: 100%;
        height: 532px;
        background: url('/static/image/monitor-center/new/map-show.png') no-repeat;
        margin: 32px 0 20px 0;
      }
      .center-bottom-content {
        display: flex;
        justify-content: space-between;
        .device-type-count-box {
          width: 496px;
          height: 236px;
          background: url('/static/image/monitor-center/new/device-type-count.png') no-repeat;
        }
        .device-install-box {
          width: 248px;
          height: 236px;
          background: url('/static/image/monitor-center/new/device-install.png') no-repeat;
        }
      }
    }
    .right-content {
      width: 410px;
      .warning-instance-time-count-box {
        width: 100%;
        height: 216px;
        background: url('/static/image/monitor-center/new/warning-instance-time-count.png') no-repeat;
        margin-bottom: 20px;
      }
      .place-rank-box {
        width: 100%;
        height: 216px;
        background: url('/static/image/monitor-center/new/warning-instance-time-count.png') no-repeat;
        margin-bottom: 20px;
      }
      .daily-update-rank-box {
        width: 100%;
        height: 349px;
        background: url('/static/image/monitor-center/new/daily-update-rank.png') no-repeat;
        margin-bottom: 20px;
      }
    }
  }
</style>
